<template>
	<view class="body">
		<uni-section title="会议信息" padding="20rpx 40rpx;">
			<view class="row-input">
				<text class="star">*</text>
				<text class="label">会议室:</text>
				<input type="text" class="editor" disabled maxlength="20" v-model="roomName" />
			</view>

			<view class="row-input mt-10">
				<text class="star">*</text>
				<text class="label">会议标题:</text>
				<input type="text" class="editor" placeholder="请输入会议标题" v-model="title" maxlength="30" />
			</view>

			<view class="row-input mt-10">
				<text class="star">*</text>
				<text class="label">会议日期:</text>
				<view class="date-wrap">
					<picker class="date-item" mode="date" :value="date" @change="bindDateChange">
						<view class="editor">{{date}}</view>
					</picker>
				</view>
			</view>

			<view class="row-input mt-10">
				<text class="star">*</text>
				<text class="label">会议时间:</text>
				<view class="date-wrap">
					<picker class="date-item" mode="time" :value="time_start" @change="bindTimeChangeStart"
						style="flex: 1;">
						<view class="editor">{{time_start}}</view>
					</picker>
					<view class="time-spe">➖</view>
					<picker class="date-item" mode="time" :value="time_end" :start="time_start"
						@change="bindTimeChangeEnd" style="flex: 1;">
						<view class="editor">{{time_end}}</view>
					</picker>
				</view>
			</view>

			<view class="row-input mt-10">
				<text class="star hide">*</text>
				<text class="label">概要:</text>
				<textarea class="editor remark" v-model="metting_remark" placeholder="会议概要(选填)" maxlength="100"
					style="padding: 20rpx 20rpx;"></textarea>
			</view>
		</uni-section>

		<!-- <uni-section title="参会成员" padding="20rpx 40rpx;" class="mt-10" @click="chooseMem">
			<template v-slot:right>
				<image src="@/static/ic_arrow_r.png" class="arrow-r"></image>
			</template>
			<view class="member-wrap">
				张三、李四、王五
			</view>
		</uni-section> -->

		<button type="primary" class="btn" @click="add">提交</button>
	</view>
</template>

<script>
	import cfg from '@/utils/config.js'
	export default {
		data() {
			return {
				roomId: null,
				roomName: null,

				title: '',
				date: '',
				time_start: '',
				time_end: '',
				metting_remark: ''
			}
		},
		onLoad(param) {
			this.roomId = param.roomId
			this.roomName = param.roomName
		},
		methods: {
			bindDateChange(e) {
				this.date = e.detail.value
			},
			bindTimeChangeStart(e) {
				this.time_start = e.detail.value
			},
			bindTimeChangeEnd(e) {
				this.time_end = e.detail.value
			},
			add() {
				if (this.roomId == null) {
					uni.showToast({
						title: '会议室ID不能为空',
						icon: 'none'
					})
					return
				}
				if (!this.title.trim()) {
					uni.showToast({
						title: '请填写会议标题',
						icon: 'none'
					})
					return
				}
				if (!this.date.trim()) {
					uni.showToast({
						title: '请选择会议日期',
						icon: 'none'
					})
					return
				}
				if (!this.time_start.trim() || !this.time_end.trim()) {
					uni.showToast({
						title: '请选择会议起始时间',
						icon: 'none'
					})
					return
				}

				uni.request({
					url: cfg.host + 'meeting/add',
					method: 'POST',
					data: {
						title: this.title,
						desc: this.metting_remark,
						roomId: this.roomId,
						beginTime: this.date + " " + this.time_start + ":00",
						endTime: this.date + " " + this.time_end + ":00"
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								title: '预约成功',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							let msg = res.data.msg || '预约失败'
							uni.showToast({
								title: msg,
								icon: 'error'
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '保存失败',
							icon: 'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.date-wrap {
		display: flex;
		flex-direction: row;
		flex: 1;

		.date-item {
			flex: 1;
		}
	}

	.time-spe {
		margin-left: 20rpx;
		margin-right: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.remark {
		height: 150rpx;
		border: 1rpx solid #f4f4f4;
		box-sizing: border-box;
	}

	.member-wrap {
		font-size: 28rpx;
	}
</style>